/**
 * 分页器
 */
class Pagination {
	
	static #DISPLAY_SHOW = 'flex';
	static #DISPLAY_HIDE = 'none';
	static FIRST_PAGE_NO = 1;
	static DEFAULT_PAGE_SIZE = 5;
	
	/**
	 * @param {{
	 * 		no: number,
	 * 		size: number,
	 * 		total: number,
	 * 		totalCount: number,
	 * 		prev: number,
	 * 		next: number,
	 * }} page { 
	 * 		no: 当前页码,
	 * 		size: 页容量,
	 * 		total: 总页数,
	 * 		totalCount: 总记录数,
	 * 		prev: 上一页,
	 * 		next: 下一页,
	 * }
	 * @param {string} root 分页器元素选择器
	 */
	constructor(page, root = '.pagination') {
		this.root = document.querySelector(root);
		
		// 首页、上一页、下一页、末页按钮
		this.firstElement = this.root.querySelector('a.first');
		this.prevElement = this.root.querySelector('a.prev');
		this.nextElement = this.root.querySelector('a.next');
		this.lastElement = this.root.querySelector('a.last');
		
		// 跳转指定页面的表单
		this.form = this.root.querySelector('form');
		
		// 当前页码、总页码、总记录数的元素
		this.currentElement = this.root.querySelector('.current');
		this.totalElement = this.root.querySelector('.total');
		this.totalCountElement = this.root.querySelector('.totalCount');
		
		this.no = Pagination.FIRST_PAGE_NO;
		this.size = Pagination.DEFAULT_PAGE_SIZE;
		this.total = 0;
		this.totalCount = 0;
		this.prev = Pagination.FIRST_PAGE_NO;
		this.next = Pagination.FIRST_PAGE_NO;
		Object.assign(this, page);
	}
	
	/**
	 * 渲染分页器
	 * @param {{
	 * 		no: number,
	 * 		size: number,
	 * 		total: number,
	 * 		totalCount: number,
	 * 		prev: number,
	 * 		next: number,
	 * }} page { 
	 * 		no: 当前页码,
	 * 		size: 页容量,
	 * 		total: 总页数,
	 * 		totalCount: 总记录数,
	 * 		prev: 上一页,
	 * 		next: 下一页,
	 * }
	 */
	render(page) {
		Object.assign(this, page);
		
		// 当前页、总页数、总记录数
		this.currentElement.textContent = this.no;
		this.totalElement.textContent = this.total;
		this.totalCountElement.textContent = this.totalCount;
		
		// 首页、上一页、下一页、最后一页
		this.firstElement.dataset.no = Pagination.FIRST_PAGE_NO;
		this.prevElement.dataset.no = this.prev;
		this.nextElement.dataset.no = this.next;
		this.lastElement.dataset.no = this.total;
		
		// 跳转指定页面的表单
		this.form.no.setAttribute('value', this.no);
		this.form.no.setAttribute('min', Pagination.FIRST_PAGE_NO);
		this.form.no.setAttribute('max', this.total);
		this.form.size.setAttribute('value', this.size);
	}
	
	/**
	 * 添加翻页按钮的点击事件
	 * @param {Function} pageTurnEvent  点击事件回调函数，该函数接收两个参数：no: 页码，size: 页容量
	 */
	addPageTurnEventListener(pageTurnEvent) {
		// 首页、上一页、下一页、末页按钮的click事件
		;[
			this.firstElement,
			this.prevElement,
			this.nextElement,
			this.lastElement
		].forEach(element => {
			element.addEventListener('click', async (event) => {
				event.preventDefault();
				// 要跳转的页码
				let no = event.target.dataset.no;
				no = no ? parseInt(no) : Pagination.FIRST_PAGE_NO;
				pageTurnEvent(no, this.size);
			});
		});
		// 跳转页面表单的提交事件
		this.form.addEventListener('submit', async (event) => {
			event.preventDefault();
			// 要跳转的页码
			const no = this.form.no ? parseInt(this.form.no.value) : Pagination.FIRST_PAGE_NO;
			pageTurnEvent(no, this.size);
		});
	}
	
	/**
	 * 显示分页器
	 */
	show() {
		this.root.style.display = Pagination.#DISPLAY_SHOW;
	}
	
	/**
	 * 隐藏分页器
	 */
	hide() {
		this.root.style.display = Pagination.#DISPLAY_HIDE;
	}
}